<template>
    <h2>分配权益页面</h2>
    <input type="button" value="添加权益" @click="addRankRight" />
    
    <table border="1">
        <thead>
            <tr>
                <td>
                    <input type="checkbox" v-model="flag" @change="ckall"/>
                </td>
            <td>权益编号</td>
            <td>权益名称</td>
            <td>权益图标</td>
            <td>权益说明</td>
            <td>权益状态</td>
        </tr>    
        </thead>
        <tbody>
            <tr v-for="item in right">  
                <td>
                    <input type="checkbox" :value="item.Right_Id" v-model="arrIds" :checked="ck" @change="fck"/>
                </td>  
            <td>{{item.Right_Id}}</td>
            <td>{{item.Right_Name}}</td>
            <td>
                <img style="width:50px;height:50px" :src="item.Right_Img"/>
            </td>
            <td>{{item.Right_Info}}</td>
            <td>{{item.Right_State==true?"启用":"禁用"}}</td>
        </tr>    
        </tbody>
    </table>
    共{{ page.count }}条数据，每页{{ page.size }}条数据,第{{ page.index }}/{{ page.pcount }}页
    <a href="#" style="margin-right: 10px;" @click="pageChange('F')">首页</a>
    <a href="#" style="margin-right: 10px;" @click="pageChange('P')">上一页</a>
    <a href="#" style="margin-right: 10px;" @click="pageChange('N')">下一页</a>
    <a href="#" style="margin-right: 10px;" @click="pageChange('E')">尾页</a>
    <select v-model="csize" @change="ChangeSize">
        <option value="1">每页1条</option>
        <option value="2">每页2条</option>
        <option value="3">每页3条</option>
    </select>
    <input type="text" v-model="nindex" style="width:30px"/>
    <input type="button" value="跳转" @click="jump"/>
</template>
<script setup lang="ts">
    import {ref,onMounted} from 'vue'
    import {useRouter} from 'vue-router'
    const router=useRouter();
    import axios from 'axios'
    import { useMemberStore } from '../../store';
    const useStore=useMemberStore();
    const flag=ref(false);
    const ck=ref(false);
    const arrIds=ref([]);
    const ckall=()=>{
        if(flag.value==true)
        {
            ck.value=true;
            arrIds.value=right.value.map((item:any)=>{
                return item.Right_Id
            });
        }
        else
        {
            ck.value=false;
            arrIds.value=[];
        }
    }
    const fck=()=>{
        if(arrIds.value.length==right.value.length)
        {
            flag.value=true;
        }
        else
        {
            flag.value=false;
        }
        console.log(arrIds.value.toString());
    }

    const addRankRight=()=>{
        alert(useStore.mrid);
        console.log(arrIds.value.toString());
        axios.get('https://localhost:7292/api/Member/RRAdd',{
            params:{
                rankid:useStore.mrid,
                rightids:arrIds.value.toString()
            }
        })
        .then(res=>{
            if(res.data>0)
            {
                alert('添加成功');
                router.push('/showRankRight');
            }
            else
            {
                alert('添加失败');
            }
        })
    }

    const pageChange=(mes:string)=>{
        switch(mes)
        {
            case 'F':page.value.index=1;break;
            case 'P':
                if(page.value.index>1)
                {
                    page.value.index--;
                }
                else
                {
                    alert('已经是第一页了');
                }
                break;
            case 'N':
                if(page.value.index<page.value.pcount)
                {
                    page.value.index++;
                }
                else
                {
                    alert('已经是最后一页了');
                }
                break;
            case 'E':page.value.index=page.value.pcount;break;
        }
        loadData();
    }
    const csize=ref(10);
    const ChangeSize=()=>{
        page.value.size=csize.value;
        page.value.index=1;
        loadData();
    }
    const nindex=ref("");
    const jump=()=>{
        if(nindex.value=="")
        {
            alert('页码不能为空');
            return;
        }
        if(isNaN(Number(nindex.value)))
        {
            alert('请输入数字');
            return;
        }
        if(Number(nindex.value)>=1&&Number(nindex.value)<=page.value.pcount)
        {
            page.value.index=Number(nindex.value);
            loadData();
        }
        else
        {
            alert('请输入有效页码');
            return;
        }
    }
    const right:any=ref([{
      "Right_Id": 1,
      "Right_Name": "",
      "Right_Img": "",
      "Right_Info": "",
      "Right_State": true
    }] )
    const page=ref({
        count:0,
        pcount:0,
        index:1,
        size:10
    })
    onMounted(()=>{
       loadData();
    })
    const loadData=()=>{
        axios.get('https://localhost:7292/api/Member/RightShow',{
            params:{
                index:page.value.index,
                size:page.value.size
            }
        })
        .then(res=>{
            right.value=res.data.pageList;
            page.value.count=res.data.count;
            page.value.pcount=res.data.pcount;
        })
    }
</script>